<template>
  <div class="app-container" id="business">
    <div>
      <el-table :data="list" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row max-height="550" class="businessTable">
        <el-table-column align="center" label='商家名称' width="95">
          <template slot-scope="scope">
            {{scope.row.companyName}}
          </template>
        </el-table-column>
        <el-table-column label="返利起投" align="center">
          <template slot-scope="scope">
            {{scope.row.profitOrigin}}
          </template>
        </el-table-column>
        <el-table-column label="利率区间" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.minYearProfit}}%~{{scope.row.maxYearProfit}}%</span>
          </template>
        </el-table-column>
        <el-table-column label="最高返利（元）" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.maxProfit}}</span>
          </template>
        </el-table-column>
        <el-table-column label="投资用户（万人）" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.investmentNum }}</span>
          </template>
        </el-table-column>
        <!--<el-table-column label="上下架时间" align="center">-->
          <!--<template slot-scope="scope">-->
            <!--<span>{{scope.row.investmentNum }}</span>-->
          <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.approve=='0'?'待审核':scope.row.approve=='1'?'审核通过':'审核不通过' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="created_at" label="操作" width="400" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="audit(scope,'1')">审核通过</el-button>
            <el-button type="danger" size="mini" @click="audit(scope,'2')">审核不通过</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="curPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="size">
      </el-pagination>
    </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import { companyList, companyApprove } from 'api/business'
export default {
  data() {
    return {
      list: null,
      listLoading: true,
      label: '',
      label1: '',
      label2: '',
      formLabelWidth: '100px',
      size: 0,
      pageSize: 10,
      curPage: 1
    }
  },
  computed: {
    route() {
      return this.$route
    }
  },
  created() {
    this.companyList()
  },
  methods: {
    async audit(scope, approveType) {
      const parm = {
        companyId: scope.row.id,
        approveType: approveType
      }
      try {
        let back = await companyApprove(parm)
        back = back.data
        if (back.resultCode === '200') {
          this.companyList()
        } else {
          this.$alert(back.msg, '提示')
        }
        console.log(back)
      } catch (err) {
        this.$alert('请求出错', '提示')
      }
      companyApprove
    },
    async companyList() {
      const parm = {
        pageSize: this.pageSize,
        curPage: this.curPage - 1,
        companyName: '',
        profitOrigin: '',
        saleStatus: ''
      }
      try {
        let back = await companyList(parm)
        back = back.data
        if (back.resultCode === '200') {
          this.list = back.result
          this.size = back.size
          this.listLoading = false
        } else {
          this.$alert(back.msg)
        }
      } catch (err) {
        this.$alert('请求失败', '提示')
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.companyList()
    },
    handleCurrentChange(val) {
      this.curPage = val
      this.companyList()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  #business{
    .businessTable{
      margin-top:20px;
    }
    .input{
      margin: 0 10px;
      float: left;
    }
    .button{
      float: right;
      margin: 0 10px;
    }
    .block{
      float: right;
      margin-top:10px;
    }
  }
</style>
